<template>
    <div>
      
        <el-input v-model="Dname" placeholder="请输入部门名称进行搜索" style="width:500px;" @input="selectDepartment"></el-input>
        
      <el-tree style="width:600px"
      :data="department"
      node-key="id" 
       default-expand-all
      :expand-on-click-node="false">
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>{{ node.label }}</span>
        <span>
          <el-button
            type="primary   "
            size="mini"
            @click="() => append(data)" style="width:53px;height:20px;padding-top: 3px;padding-left:1px">
            <span >添加部门</span>
            
          </el-button>
          <el-popconfirm
            :title="'此操作将永久删除，确定删除吗？'"
            @onConfirm="() => remove(node, data)"
          >
            <el-button slot="reference" size="mini" type="danger" style="width:53px;height:20px;padding-top: 3px;padding-left:1px"
              >删除部门</el-button>
          </el-popconfirm>
        </span>
      </span>
    </el-tree>


    <el-dialog title="添加部门" :visible.sync="dialogFormDepartment">
      <el-form :model="addDepartment">
        <el-form-item label="上级部门" >
           {{addDepartment.parentName}}
        </el-form-item>
        <el-form-item label="部门名称" >
          <el-input v-model="addDepartment.name"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormDepartment = false">取 消</el-button>
        <el-button type="primary" @click="add()">确 定</el-button>
      </div>
    </el-dialog>

    </div>
</template>

<script>

export default {
    name:'Department',
      data() {
        return{
          Dname:'',
         department: [],
         dialogFormDepartment:false,
         addDepartment:{
           parentName:'',
           name:'',
           parentId:''
         },
         defaultProps: {
          children: 'children',
          label: 'label'
        }
        }
    },
    created(){
      this.getAllDepartment();
    },
    methods: {
      getAllDepartment(){
        this.$axios.post(
          'basic/DepartmentController/getAllDepartment',
          this.$qs.stringify({})
        ).then((value) => {
          this.department=value.data
        }).catch((value) => {
          console.error(value)
        })
      },
      append(data) {
        this.dialogFormDepartment=true;
        this.addDepartment.parentName=data.label;
        this.addDepartment.parentId=data.id

      },
      selectDepartment(){
        this.$axios.post(
          'basic/DepartmentController/getDepartmentByName',
          this.$qs.stringify({name:this.Dname})
        ).then((value) => {
          this.department=value.data
        }).catch((value) => {
          console.error(value)
        })
        
      },
      add(){
        this.dialogFormDepartment=false;
        
          this.$axios.post(
            'basic/DepartmentController/insertDepartment',
            this.$qs.stringify({
              parentId:this.addDepartment.parentId,
              name:this.addDepartment.name
            })
          ).then((value) => {
            this.addDepartment={
               parentName:'',
                name:'',
                parentId:''
            }
            if (value.data==1) {
            this.$message({
              message: "添加成功",
              type: "success",
            });
            this.getAllDepartment();
            }else {
              alert("添加失败")
            }
          }).catch((value) => {
            console.error(value)
          })
      },

      remove(node, data) {
        
        this.$axios.post(
          "basic/DepartmentController/deleteDepartmentById",
          this.$qs.stringify({id:data.id})
        ).then((value) => {
          if (value.data==1) {
            this.$message({
              message: "删除成功",
              type: "success",
            });
          }
          this.getAllDepartment();
        }).catch((value) => {
         if(value != null) {
            this.$message({
              message: "该部门下有员工，删除失败",
              type: "error",
            });
          }
        })
      },
    },
    
  
}
</script>
<style scoped>
.custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 16px;
    padding-right: 8px;
    
  }
</style>